<script setup>
import { reactive,ref } from 'vue'

/* 
    reactive()
        -返回一个对象的响应式代理
        -返回的是一个深层的响应式对象
        -也可以使用shallowreactive()创建一个浅层的响应式对象
        -缺点
            -只能返回对象的响应式代理,不能处理原始值

    ref()
        -接收任意值，并返回他的响应式代理
*/
    const stu = reactive({
        name:"孙悟空"
    })


    // ref再生成响应式代理时，是将值包装为了一个对象 0 --> {value:0}
    // 访问ref对象时，必须通过对象.value 来访问其值
    // 在模板中，ref对象会被自动解包

    let count = ref(0)  //生成一个0的响应式代理

    const person = ref({name:"猪八戒",age:18})

    // vue给我们提供了一个语法糖，使得ref对象在script标签中也能自动解包
    // $是一个实验性的，需要在插件中做一些配置
    function fn(){
        // count自增
        count.value++
    }
</script>

<template>
    <h1>组合式API</h1>

    <h2>{{ stu.name }}</h2>

    <h2>{{ person.name }}</h2>

    <button @click="fn">{{ count }}</button>
</template>